<template>
  <h2>对话框</h2>
  <el-button @click="dialogVisible = true">
    基本弹框
  </el-button>
  <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
    <span>弹框内容部分</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确认</el-button>
      </span>
    </template>
  </el-dialog>

  <h2>消息框</h2>
  <el-button @click="openMessageBoxAlert">提示信息</el-button>
  <el-button @click="openMessageBoxConfirm">确认信息</el-button>

  <h2>通知框</h2>
  <el-button type="success" @click="openNotify1">成功</el-button>
  <el-button type="warning" @click="openNotify2">警告</el-button>
  <el-button type="info" @click="openNotify3">提示</el-button>
  <el-button type="danger" @click="openNotify4">错误</el-button>
</template>

<script>
import {ref} from 'vue'
import {ElMessage, ElMessageBox, ElNotification} from 'element-plus'

export default {
  data() {
    return {
      dialogVisible: ref(false)
    }
  },
  methods: {
    handleClose(done) {
      ElMessageBox.confirm('确定放弃当前操作吗？')
          .then(() => {
            done()
          })
          .catch(() => {
          })
    },

    openMessageBoxAlert() {
      ElMessageBox.alert('这里是提示信息', '温馨提示：', {
        confirmButtonText: '我已知晓',
        callback: (action) => {
          ElMessage({
            type: 'info',
            message: `action: ${action}`,
          })
        },
      })
    },

    openMessageBoxConfirm() {
      ElMessageBox.confirm(
          '确认放弃当前报名吗？',
          '温馨提示：',
          {
            confirmButtonText: '我意已决',
            cancelButtonText: '我再想想',
            type: 'warning',
          }
      )
          .then(() => {
            ElMessage({
              type: 'success',
              message: '你同意了',
            })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '你取消了',
            })
          })
    },

    openNotify1() {
      ElNotification({
        title: 'Success',
        message: 'This is a success message',
        type: 'success',
      })
    },
    openNotify2() {
      ElNotification({
        title: 'Warning',
        message: 'This is a warning message',
        type: 'warning',
      })
    },
    openNotify3() {
      ElNotification({
        title: 'Info',
        message: 'This is an info message',
        type: 'info',
      })
    },
    openNotify4() {
      ElNotification({
        title: 'Error',
        message: 'This is an error message',
        type: 'error',
      })
    }
  }
}
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
